<script src="assets/js/go.js"></script>
<script id="code">
	var textArry5={
		id: "1",
		name: "文字控件",
		height: "140",
		data: [
			{key:"onwText", category:"文字一",classifty:"textShape",type:3,color:"#1E9FFF",textColor:"#fff",text:"文字"},
			{key:"twoText", category:"文字二",classifty:"textShape",type:3,color:"#569bd5",textColor:"#fff",text:"文字"},
			{key:"threeText", category:"文字三",classifty:"textShape",type:3,color:"#a9a9e9",textColor:"#fff",text:"文字"}
		]
	};
	var classifylist=[];

	var bigdata;

	var timer;

	function  flash() {
		//所有模型更改都应该在事务模型中进行
		myDiagram.model.startTransaction("flash");
		for (var data1 of myDiagram.model.nodeDataArray){
			if (data1.select_no !== undefined){
				let name1 = getNameById(data1.select_no);
				let value1 = getValueById(data1.select_no);
				if (data1.select_no === ""){
					myDiagram.model.setDataProperty(data1, "text",""); // 修改属性
				}else {
					myDiagram.model.setDataProperty(data1, "text", name1 + "\n" + value1); // 修改属性
				}
			}
		}
		myDiagram.model.commitTransaction("flash");
		timer = setTimeout(function () {
			flash()
		},3000)
	}

	function init() {
		menusList();
		objGo = go.GraphObject.make; // 创建画布
		myDiagram = objGo(go.Diagram, "myDiagramDiv", // 必须命名或引用div html元素
				{
					"ChangedSelection" : onSelectionChanged,
					"initialContentAlignment": go.Spot.Center, // 居中显示
					"allowDrop": true,  // 允许拖拽
					"grid.visible": false,
					"allowHorizontalScroll": true,// 禁止水平拖拽
					"allowVerticalScroll": true,//禁止垂直拖动画布
					"isReadOnly": true, // 只读画布内容
				});

		myDiagram.linkTemplate =
				objGo(go.Link,
						{ routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 },
						new go.Binding("points").makeTwoWay(),
						objGo(go.Shape, { isPanelMain: true, stroke: "#1E9FFF", strokeWidth: 6 }),// 线的边
						objGo(go.Shape, { isPanelMain: true, stroke: "#3a77e2", strokeWidth: 4 }), // 线的背景颜色
						objGo(go.Shape, { isPanelMain: true, stroke: "#f5f5f5", strokeWidth: 2, name: "PIPE", strokeDashArray: [10, 10] }), // 中间流动的
						objGo(go.Shape, { toArrow: "Triangle", fill: "#3a77e2", stroke: null }), // 箭头的颜色
				);

		sharedToolTip =
				objGo(go.Adornment, "Auto",
						objGo(go.Shape, "RoundedRectangle", { fill: "lightyellow" }),
						objGo(go.TextBlock, { margin: 2 },
								new go.Binding("text",  "" , function(d) { return d.category; })));

		nodeResizeAdornmentTemplate =
				objGo(go.Adornment, "Spot",
						{ locationSpot: go.Spot.Right },
						objGo(go.Placeholder),
						objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),
						objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
						objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),

						objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
						objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),

						objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" }),
						objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(2, 2), fill: "lightblue", stroke: "deepskyblue" }),
						objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(4, 4), fill: "lightblue", stroke: "deepskyblue" })
				);

		nodeRotateAdornmentTemplate =
				objGo(go.Adornment,
						{ locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" },
						objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "lightblue", stroke: "deepskyblue" }),
						objGo(go.Shape, { geometryString: "M4.2 8 L4.2 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.0, strokeDashArray: [4, 2] })
				);

		// 根据数据定义菜单分类
		paletteArry=[]

		for(var item of classifylist){
			let contentDataImg={};
			contentDataImg.paletteDefine=new go.Palette("classify-"+item.id);
			contentDataImg.id=item.id;
			contentDataImg.data=item.data;
			for(var itemm of item.data){ // 每个分类里的图片
				var node;
				if(itemm.classifty=="img"){

					node =objGo(go.Node, "Spot", nodeStyle(),
							objGo(go.Panel, "Auto",
									{ name: "PANEL" },
									new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
									objGo(go.Shape, "Rectangle",  // default figure
											{
												portId: "",
												fromLinkable: true, margin:0,toLinkable: true, cursor: "pointer",
												fill: "rgba(70,113,196,0)",  // default color
												strokeWidth: 0
											},
									),
									objGo(go.Picture,
											{ width:itemm.width-5,height:itemm.height-5},
											new go.Binding("source"),
											new go.Binding("width"),
											new go.Binding("height"),
									),
									objGo(go.TextBlock,
											{
												font: "Bold 14px Lato, sans-serif",
												alignment: go.Spot.TopCenter,alignmentFocus: go.Spot.BottomCenter,
												textAlign: "center", margin: 4,
												maxSize: new go.Size(100, NaN),
												text:""
											},
											new go.Binding("text"))
								),
								makePort("top", go.Spot.Top, true, true),
								makePort("left", go.Spot.Left, true, true),
								makePort("right", go.Spot.Right, true, true),
								makePort("botton", go.Spot.Bottom, true, true),
								{
									mouseEnter: function(e, node) { showSmallPorts(node, true); },
									mouseLeave: function(e, node) { showSmallPorts(node, false); }
								}
					);
				} else if(itemm.classifty=="shape"){
					node =objGo(go.Node, "Spot", nodeStyle(),
							objGo(go.Shape, "Rectangle",
									{ strokeWidth:1, fill: "#8fbdee"},
									new go.Binding("figure")),
							makePort("top", go.Spot.Top, true, true),
							makePort("left", go.Spot.Left, true, true),
							makePort("right", go.Spot.Right, true, true),
							makePort("botton", go.Spot.Bottom, true, true),
							{
								mouseEnter: function(e, node) { showSmallPorts(node, true); },
								mouseLeave: function(e, node) { showSmallPorts(node, false); }
							}
					);
				} else if(itemm.classifty=="textBlock"){
					node = objGo(go.Node, "Spot",nodeStyle(),
							objGo(go.TextBlock,
									{
										font: "normal 11pt Helvetica, Arial, sans-serif",
										margin: 8,
										maxSize: new go.Size(160, NaN),
										editable: true,stroke:"#0A7EF7",
									},
									new go.Binding("text").makeTwoWay(),
									new go.Binding("stroke","color"),
							)
					);
				} else if(itemm.classifty=="textShape"&&itemm.type==4){
					node=objGo(go.Node, "Horizontal",nodeStyleNo(),
							{ background: "#c1c4ee" },
							objGo(go.TextBlock,
									// 文字周围的空隙, 大号字体, 白色笔画:
									{
										font: "normal 11pt Helvetica, Arial, sans-serif",
										margin: 6,
										maxSize: new go.Size(160, 25),
										wrap: go.TextBlock.WrapFit,
										editable: true,
										stroke:itemm.textColor,
									},
									new go.Binding("text").makeTwoWay()),
							objGo(go.Panel, "Auto",
									objGo(go.Shape, "Rectangle",
											{
												fill:"#1E9FFF",  // default color
												width:60,
												height:30,
												strokeWidth:0,
											},
									),
									objGo(go.TextBlock,
											{
												font: "normal 11pt Helvetica, Arial, sans-serif",
												margin: 8,
												editable: true,
												text:"生效",
												stroke:"#fff"
											},
									),
							),

							new go.Binding("strokeWidth"),
					);
				} else if(itemm.classifty=="textShape"){
					node=objGo(go.Node, "Spot",nodeStyle(),
							objGo(go.Panel, "Auto",
									{ name: "PANEL" },
									new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
									objGo(go.Shape, "Rectangle",
											{
												fill: itemm.color,  // default color
												strokeWidth: 0,
											},
											new go.Binding("strokeWidth"),
									),
									objGo(go.TextBlock,
											{
												font: "normal 11pt Helvetica, Arial, sans-serif",
												margin: 8,
												maxSize: new go.Size(160, NaN),
												wrap: go.TextBlock.WrapFit,
												editable: true,
												stroke:itemm.textColor,
											},
											new go.Binding("stroke"),
											new go.Binding("text").makeTwoWay())
							),
					);
				}
				myDiagram.nodeTemplateMap.add(itemm.category, node);
			}
			paletteArry.push(contentDataImg);
		}
		for(var itemList of paletteArry){
			itemList.paletteDefine.nodeTemplateMap = myDiagram.nodeTemplateMap;
			var nodeDataList=[];
			for(var itemChart of itemList.data){
				if(itemChart.key.indexOf('开关')>=0){
					nodeDataList.push( {key:itemChart.key,category: itemChart.category ,"source":itemChart.src,'text':''})
				}
				else if(itemChart.classifty=="img"){
					nodeDataList.push( {key:itemChart.key,category: itemChart.category ,"source":itemChart.src})
				} else if(itemChart.classifty=="shape"){
					nodeDataList.push( {key:itemChart.key,category:itemChart.category, figure: itemChart.figure})
				} else if(itemChart.classifty=="textBlock"){
					nodeDataList.push({key:itemChart.key,category: itemChart.category})
				} else if(itemChart.classifty=="textShape"){
					nodeDataList.push({key:itemChart.key,category: itemChart.category ,text: itemChart.text})
				}
			}
			itemList.paletteDefine.model.nodeDataArray = nodeDataList
		}
		setTimeout(function(){
			for(var itemList of paletteArry){
				$("#classify-"+itemList.id).css('display',"none")
			}
		},100)

		load();
		flash();

	}
	//菜单
	function menusList(){
		var menusHtml=''

		for(var item of classifylist){

			menusHtml =' <div class="classify-title" onclick="classifyShow('+item.id+')">'+item.name+'</div>'
					+'<div id="classify-'+item.id+'" class="classify-title-content" style="height: '+item.height+'px" ></div>'
			$("#myPaletteDiv").append(menusHtml);

		}
	}
	// 菜单显示内容
	function classifyShow(showId){
		if( $("#classify-"+showId).css('display')=="block"){
			$("#classify-"+showId).css('display',"none");
			$(".classify-"+showId).css('display',"none");
		} else{
			$(".classify-title-content").css('display',"none")
			$("#classify-"+showId).css('display',"block");
			$(".classify-"+showId).css('display',"block");
		}
	}
	// 组件样式定义
	function nodeStyle() {
		return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
			{ resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate },
			{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
			new go.Binding("angle").makeTwoWay(),
			new go.Binding("isShadowed", "isSelected").ofObject(),
			{
				selectionAdorned: false,
				shadowOffset: new go.Point(0, 0),
				shadowBlur: 15,
				shadowColor: "#00a9c9",
				toolTip: sharedToolTip
			}];
	}
	function nodeStyleNo() {
		return [new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
			{ rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate },
			new go.Binding("angle").makeTwoWay(),
			new go.Binding("isShadowed", "isSelected").ofObject(),
			{
				selectionAdorned: false,
				shadowOffset: new go.Point(0, 0),
				shadowBlur: 15,
				shadowColor: "#00a9c9",
				toolTip: sharedToolTip
			}];
	}
	function showSmallPorts(node, show) {
		node.ports.each(function(port) {
			if (port.portId !== "") {  // don't change the default port, which is the big shape
				port.fill = show ? "rgba(58,160,255,1)" : null;
			}
		});
	}

	// 默认连线的链接位置
	function makePort(name, spot, output, input) {
		let makePortWidth=10;
		var shapeStr = "";
		switch (name){
			case "top":shapeStr = "TriangleUp";break;
			case "right":shapeStr = "TriangleRight";break;
			case "botton":shapeStr = "TriangleDown";break;
			case "left":shapeStr = "TriangleLeft";break;
		}

		return objGo(go.Shape, shapeStr,
				{
					fill: null,  // not seen, by default; set to a translucent gray by showSmallPorts, defined below
					stroke: null,
					strokeWidth:0,
					desiredSize: new go.Size(makePortWidth, makePortWidth),
					alignment: spot,  // align the port on the main Shape
					alignmentFocus: spot,  // just inside the Shape
					portId: name,  // declare this object to be a "port"
					fromSpot: spot,  // declare where links may connect at this port
					fromLinkable: output,  // declare whether the user may draw links from here
					toSpot: spot,  // declare where links may connect at this port
					toLinkable: input,  // declare whether the user may draw links to here
					cursor: "pointer"  // show a different cursor to indicate potential link point
				});
	}

	function onSelectionChanged(e) {
		$('#collectValue').val('');
		$('#conponentName').val('');
		var node = e.diagram.selection.first();
		if (node instanceof go.Node) {
			let data = node.data;

			if (data === null) {
				document.getElementById("propertiesPanel").style.display = "none";
			} else {
				document.getElementById("propertiesPanel").style.display = "block";
				$('#selectLocal').val(data['work_id']);
				$('#conponentType').val(data['select_type']);
				$('#conponentNo').val(data['select_no']);
				getName();
				getValue();
			}
		}
	}

	//RotatingTool用于通过设置GraphObject.angle属性以交互方式更改GraphObject的GraphObject.angle。
	function TopRotatingTool() {
		go.RotatingTool.call(this);
	}

	go.Diagram.inherit(TopRotatingTool, go.RotatingTool);

	TopRotatingTool.prototype.updateAdornments = function (part) {
		go.RotatingTool.prototype.updateAdornments.call(this, part);
		var adornment = part.findAdornment("Rotating");
		if (adornment !== null) {
			adornment.location = part.rotateObject
					.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top
		}
	};

	TopRotatingTool.prototype.rotate = function (newangle) {
		go.RotatingTool.prototype.rotate.call(this, newangle + 90);
	};

	// 设置线动态效果
	function flowLine(){
		var diagram = myDiagram;
		setTimeout(function() {
			var oldskips = diagram.skipsUndoManager;
			diagram.skipsUndoManager = true;
			diagram.links.each(function(link) {
				var shape = link.findObject("PIPE");
				var off = shape.strokeDashOffset - 2;
				shape.strokeDashOffset = (off <= 0) ? 20 : off;
			});
			diagram.skipsUndoManager = oldskips;
			flowLine();
		}, 200);
	}
	// // 查看页面实现图片动态效果
	let gifPictureArray=[];
	function flowPictureGif(allPictureData){
		// 获取页面动态的地址
		var canvasHtml='';
		$("#canvasDiv").html('');
		for(var item of allPictureData){
			if(item.source&&item.source.substr(item.source.length-3)=='gif'){ // 判断是否是动图
				$("#canvasDiv").append('<canvas id="myCanvas'+item.key+'"></canvas>');
				let canvasContentDiv=document.getElementById('myCanvas'+item.key);
				let canvasContent= canvasContentDiv.getContext('2d');
				item.canvasDiv=canvasContentDiv;
				item.canvasContent=canvasContent;
				gifPictureArray.push(item);
			}
		}
		if(gifPictureArray.length>0){ // 界面中有动图
			// 把动图分割，取出每帧的效果
			for(var i=0;i<gifPictureArray.length;i++){
				splitGifImg(i);
			}
		}
	}
	// 分割取出每个帧的图片内容
	var countGif=0; // 用于判断所有gif是否分割完毕
	function splitGifImg(indexNum){
		var oReq = new XMLHttpRequest();
		//var dd=gifPictureArray[indexNum].source.split('https://www.hiwooiotdev.top')[1];
		// var urlImg='http://192.168.0.103:90'+dd;
		oReq.open("GET", gifPictureArray[indexNum].source, true);
		//oReq.open("GET", urlImg, true);
		oReq.responseType = "arraybuffer";
		oReq.onload = function (oEvent) {
			var arrayBuffer = oReq.response;
			if (arrayBuffer) {
				gif = new GIF(arrayBuffer);
				loadedFrames = gif.decompressFrames(true); // 各帧内容
				gifPictureArray[indexNum].loadedFrames=loadedFrames;
				gifPictureArray[indexNum].numberLength=loadedFrames.length;
				gifPictureArray[indexNum].frameIndex=0;
				countGif+=1;
				if(countGif==gifPictureArray.length){ // 每张图片的各帧已经取出完毕
					gifRotate();// 控制gif图片自动旋转
				}
			}
		};
		oReq.send(null);
	}
	// gif图片自动旋转的方法
	function gifRotate(){
		for(var i=0;i<gifPictureArray.length;i++){  // 开始每张动图的旋转
			renderFrame(gifPictureArray[i])
		}
	}
	function renderFrame(gifPicture){
		// get the frame
		var frame = gifPicture.loadedFrames[gifPicture.frameIndex];
		var start = new Date().getTime();
		if(!frame.base64){ // 字节流还没转为bae64
			if(!gifPicture.width){
				gifPicture.width=80;
				gifPicture.height=parseInt((frame.dims.height*80)/frame.dims.width)
			}
			gifPicture.canvasContent.clearRect(0,0,gifPicture.canvasDiv.width,gifPicture.canvasDiv.height);
			if(frame.dims.height!=gifPicture.canvasDiv.height){
				gifPicture.canvasDiv.width = parseInt(frame.dims.width);
				gifPicture.canvasDiv.height = parseInt(frame.dims.height);
			}
			var frameImageData = gifPicture.canvasContent.createImageData(frame.dims.width, frame.dims.height);
			frameImageData.data.set(frame.patch);
			gifPicture.canvasContent.putImageData(frameImageData,0,0);
			var image=new Image();
			image.src=gifPicture.canvasDiv.toDataURL();
			gifPicture.loadedFrames[gifPicture.frameIndex].base64=image.src
		}
		let nodeData = myDiagram.model.findNodeDataForKey(gifPicture.key);
		nodeData.source=frame.base64;
		nodeData.width=gifPicture.width;
		nodeData.height=gifPicture.height;
		myDiagram.model.updateTargetBindings(nodeData);
		gifPicture.frameIndex+=1;
		if(gifPicture.frameIndex >= gifPicture.numberLength){
			gifPicture.frameIndex = 0;
		}
		var end = new Date().getTime();
		var diff = end - start;
		setTimeout(function(){
			requestAnimationFrame(function(){renderFrame(gifPicture)});
			//renderFrame();
		}, Math.max(0, Math.floor(frame.delay - diff)));
	}

	var contentData ={};

	function load(){
		myDiagram.model = go.Model.fromJson(contentData);
		flowPictureGif(contentData.nodeDataArray);
		flowLine();
		loadDiagramProperties(); // 在Model.modelData被带入内存后执行此操作
	}

	function ConponentListInit(res){
		let ii = 2;
		classifylist.splice(0,classifylist.length);
		classifylist.push(textArry5);
		res.rows.forEach(function (e){
			let i = 0;
			classifylist.forEach(function (j,index,arr){
				if (e.type === j.name){
					i++;
					let d = {
						src: e.data,
						classifty:'img',
						category:e.label,
						type:2,
						key:e.id.toString(),
						width:80,
						height:80
					}
					classifylist[index].data.push(d);
				}
			})
			if (i === 0){
				let classifyeme = {
					id: (ii++).toString(),
					name: e.type,
					height: "300",
					data:[{
						src: e.data,
						classifty:'img',
						category:e.label,
						type:2,
						key:e.id.toString(),
						width:80,
						height:80
					}]
				}
				classifylist.push(classifyeme);
			}
		})
	}

	//获取控件栏
	$.ajax({
		type: 'get',
		url: '/component/select',
		data: {
			'cname': companyName
		},
		dataType: 'json',
		async: false,
		contentType: "application/json; charset=utf-8",
		success: function (res) {
			ConponentListInit(res);
		},
	});

		//获取图表模板
	$.ajax({
			type:'get',
			url:'/chart/selectOne',
			data:{
				'id': flowchartCheckId
			},
			dataType: 'json',
			async: false,
			contentType: "application/json; charset=utf-8",
			success: function (res) {
				contentData = JSON.parse(res.result.data);
				$("#flowchart_name").val(res.result.chartName);
			}
		})

	$.ajax({
		type: 'get',
		url: "/chart/selectSensor",
		data: {
			companyId: label_id, //这里是flowchart_table.js中第39行的label_id，是企业id
		},
		dataType: 'json',
		async: false,
		contentType: "application/json; charset=utf-8",
		success: function (data) {
			bigdata = data; //这里面存的是所有的设备编号和属性信息
			/*for(var i=0;i<data.results.length;i++){
                $("#select_id").append("<option value='"+data.results[i].名称+"'>"+data.results[i].名称+"</option>");
            }*/
		},
		error: function () {
			bootoast({
				message: '失败',
				position: 'top',
				type: 'danger',
				timeout: 1.5,
			});
		}
	})

	init();// 初始化组件内容

	/**
	 * 获取选择设备编号对应设备的最新值
	 */
	function getValue() {
		if($('#conponentNo').val() && $('#conponentNo').val().length !== 0) {
			$.ajax({
				type: 'get',
				url: '/entity_water/query_new_value_by_sensor_row_id',
				data: {
					'businessId': label_id,
					'sensorRowId': $("#conponentNo").val(),
				},
				dataType: 'json',
				async: false,
				contentType: "application/json; charset=utf-8",
				success: function (res) {

					let data = res.data
					$('#collectValue').val(data)
				},
			});

			// setTimeout("getValue()", 2000)
		}
	}

	/**
	 * 获取选择设备编号对应设备的名称
	 */
	function getName(){
		console.log(label_id)
		console.log($('#conponentNo').val())
		if($('#conponentNo').val() && $('#conponentNo').val().length !== 0){
			$.ajax({
				type: 'get',
				url: '/chart/selectOneName',
				data: {
					'businessId': label_id,
					'sensorRowId': $("#conponentNo").val(),
				},
				dataType: 'json',
				async: false,
				contentType: "application/json; charset=utf-8",
				success: function (res) {
					$('#conponentName').val(res.name)
				},
				error: function () {
					bootoast({
						message: '失败',
						position: 'top',
						type: 'danger',
						timeout: 1.5,
					});
				}
			});
		}
	}

	var value2
	/**
	 * 获取选择设备编号对应设备的最新值
	 */
	function getValueById(sensorId) {
		$.ajax({
			type: 'get',
			url: '/entity_water/query_new_value_by_sensor_row_id',
			data: {
				'businessId': label_id,
				'sensorRowId': sensorId,
			},
			dataType: 'json',
			async: false,
			contentType: "application/json; charset=utf-8",
			success: function (res) {
				value2 = res.data;
			},
		});
		return value2
	}

	var name2
	/**
	 * 获取选择设备编号对应设备的名称
	 */
	function getNameById(sensorId){
		$.ajax({
			type: 'get',
			url: '/chart/selectOneName',
			data: {
				'businessId': label_id,
				'sensorRowId': sensorId,
			},
			dataType: 'json',
			async: false,
			contentType: "application/json; charset=utf-8",
			success: function (res) {
				name2 = res.name
			},
		});
		return name2
	}

	function loadDiagramProperties(e) {
		// 设置Diagram.initialPosition而不是Diagram.position，以处理初始化副作用
		var pos = myDiagram.model.modelData.position;
		if (pos)
			myDiagram.initialPosition = go.Point.parse(pos);
	}

	$("#btn_out").click(function() {
		clearInterval(timer);
		$('#page-wrapper').load('pages/flowchart_table.html');
	});

</script>


<div id="sample" >
    <div class="input-group"
		style="margin: 10px 10px 20px; width: 250px;position: absolute">
		<span class="input-group-addon">流程图名称</span> <input type="text" readOnly="true"
			id="flowchart_name" class="form-control">
	</div>
	<div id="toolbar" class="btn-group" style="margin: 10px 300px 20px">
	    <button id="btn_out" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-log-out"
				aria-hidden="true"></span>退出
		</button>
	</div>
	
	<div style="width: 100%; white-space: nowrap;">
		<span style="display: none; vertical-align: top; width: 150px">
			<div id="myPaletteDiv" style="border: solid 1px black; height: 800px"></div>
		</span>
		<span style="display: inline-block; vertical-align: top; width: 82%">
			<div id="myDiagramDiv" style="border: solid 1px black; height: 800px"></div>
		</span> 
		<span
			style="display: inline-block; vertical-align: top; width: 250px">
			<div id="propertiesPanel"
				 style="display: none; padding: 10px 10px 10px; width: 280px">
				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">所在位置</span>
						  <label for="selectLocal"></label><input id="selectLocal" readonly="readonly" class="form-control" style = "width:140px">
			    </div>

			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备类型</span>
							<label for="conponentType"></label><input id="conponentType" readonly="readonly" class="form-control" style = "width:140px">
			    </div>
			    <div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备编号</span>
					<label for="conponentNo"></label><input id="conponentNo" readonly="readonly" class="form-control" style = "width:140px">
			    </div>
				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">设备名称</span>
					<label for="conponentName"></label><input id="conponentName" readonly="readonly" class="form-control" style = "width:140px">
			    </div>

				<div class="input-group" style="margin:10px 20px 10px">
					<span class="input-group-addon" style="width:90px">采集数值</span>
						  <label for="collectValue"></label><input id="collectValue" readonly="readonly" class="form-control" style = "width:140px">
			    </div>

				<!-- <div class="input-group" style="margin:10px 10px 10px">
                <form id="form" class="bs-example bs-example-form" role="form">

                </form>
                </div> -->
		    </div>
		</span>
		

	</div>
	<div>
		<textarea id="mySavedModel"
			style="width: 100%; height: 300px; display: none">
{ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
 ],
  "linkDataArray": [
 ]}
    </textarea>
	</div>
	<div style="display: none" id="canvasDiv"></div>
</div>